<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="element/index.css">
		<script src="js/vue.js"></script>
		<script src="element/index.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-image:url(img/jjj.jpeg);
				background-size: 100%;
				background-repeat: no-repeat;
				/* opacity: 0.5; */
			}
			#app{
				width:440px ;
				margin:0 auto;
			/* 	border: 1px solid #0000FF; */
				margin-top: 10%;
				border: 3px solid gray;
				border-radius: 8px;	
				background-color: #ffffff;
				/* opacity: 0.6; */
			}
			.el-header{
				line-height: 50px !important;
				text-align: center;
				width: 100%;
			/* 	border: 1px solid #00FF00; */
			}
			.el-header h3{
				display: inline-block;
			}
			.el-header img{
				width: 50px;
				height: 50px;
				vertical-align: middle;
			}
			.el-main{
				margin: 0 auto;
				width: 80%;
				
			}
			.el-row{
				/* height: 60px; */
				margin-bottom: 20px;
			}
			.register,.login,.login1{
				height: 45px;
				line-height: 45px;
				font-size: 24px;
				font-family: "微软雅黑";
				font-weight: 500;
				text-align: center;
				cursor: pointer;
			}
			.register{
				background-color: #4b5961;
				color: white;
				border-radius: 5px;
			}
			.login{
				background-color:#3c424a ;
				color: #9a9c9f;
			}
			.icon{
				font-size: 30px;
				color: #373739;
				background-color:#FFFFFF ;
			}
			.login1{
				background-color:#ffaaff;
				border-radius: 5px;
				
			}
			.login1 .el-link{
				font-size: 20px;
				color: #000000;
				line-height: 30px;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>
					<img src="img/logo.jpeg" >
					<h3>甘肃农业大学信息科学技术学院教务系统</h3>
				</el-header>
				<el-main>
					<el-row>
						<el-col :span="24"><div class="register">用户登录</div></el-col>
					</el-row>
					<el-row>
						<el-col :span="3"><span class="icon"><i class="el-icon-user-solid"></i></span></el-col>
						<el-col :span="21"><el-input v-model="username" @focus="cleraUser" @blur="addUser"></el-input> </el-col>
					</el-row>
					<el-row>
						<el-col :span="3"><span class="icon"><i class="el-icon-lock"></i></span></el-col>
						<el-col :span="21"><el-input v-model="password"  @focus="cleraPass" @blur="addPass"></el-input> </el-col>
					</el-row>
					<el-row type="flex" justify="end">
						<el-col :span="6"><span @click="getPass" style="text-align: right;width: 100%;color:#373739;cursor: pointer;display: inline-block;">忘记密码?</span> </el-col>
					</el-row>
					<el-row>
						<el-col :span="24"><div class="login1" @click="toIndex"><el-link  href="index.html" target="_self" :underline="false">登录</el-link></div></el-col>
					</el-row>
				</el-main>
			</el-container>
			
		</div>
	</body>
</html>
<script>
	new Vue({
		el:"#app",
		data:{
			username:"用户名",
			password:"密码"
		},
		methods:{
			toIndex:function(){
				window.alert("认证成功去首页")
			},
			cleraPass:function(){
				if(this.password==="密码"){
					this.password=""
				}
			},
			addPass:function(){
				if(this.password===""){
					this.password="密码"
				}
			},
			cleraUser:function(){
				if(this.username==="用户名"){
					this.username=""
				}
			},
			addUser:function(){
				if(this.username===""){
					this.username="用户名"
				}
			},
			getPass:function(){
				window.alert("已通过邮箱发过来，请注意查收！")
			}
		}
	})
</script>
